<template>
  <el-dialog
    :model-value="show"
    title="二步验证"
    width="500px"
    append-to-body
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
    class="login-loading-dialog"
    destroy-on-close
  >
    <div class="content" v-loading="loading">
      <div v-if="isNoEmail">邮箱不存在，请尝试其他方式获取二步验证码</div>
      <template v-else>
        <div class="item">
          <span class="label">个号邮箱：</span>
          <span class="value">{{ resData.fb_email }}</span>
        </div>
        <div class="item mt-20">
          <span class="label">验证码：</span>
          <span class="value">{{ resData.code }}</span>
          <el-button link class="ml-10" @click="copyText(resData.code)">
            <el-icon><CopyDocument /></el-icon>
          </el-button>
        </div>
      </template>
    </div>
    <template #footer>
      <el-button type="info" @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { copyText } from '@/utils';
import { companyResourceFb_accountVerity } from '@/api/resources';
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  activeRow: {
    type: Object,
    default: () => {}
  }
});

const emit = defineEmits(['update:show']);

function handleClose() {
  emit('update:show', false);
}

const loading = ref(false);
const resData = ref({});
const isNoEmail = ref(false);
watch(
  () => props.show,
  val => {
    if (!val) return;
    loading.value = true;
    isNoEmail.value = false;
    resData.value = {};
    companyResourceFb_accountVerity({ id: props.activeRow.id })
      .then(res => {
        resData.value = res.data || {};
        if (res.no === 2) {
          isNoEmail.value = true;
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
);
</script>

<style lang="scss" scoped>
.content {
  padding: 30px 0;
  text-align: center;
  font-size: 15px;
  line-height: 20px;
  word-break: break-all;
}
.label {
  display: inline-block;
  width: 80px;
  text-align: right;
  font-weight: bold;
  color: #888;
}
</style>
<style>
.login-loading-dialog {
  top: 50%;
  margin-top: 0;
  transform: translateY(-50%);
}
</style>
